<template>
  <div class="all">
     <header>
       <div class="div">
         <img src="../../assets/返回.png" @click="back()" alt="">
         <span class="solid" @click="back()">返回</span>
       </div>
       <div class="div">
         <span>隐私保护</span>
       </div>
       <div class="div">
         <span class="solid"></span>
       </div>
     </header>
    <div class="label" @click="clickPwd()">
      <p>
        <span>功能模块密码设置</span>
        <img src="../../assets/更多灰@2x.png" alt="">
      </p>
    </div>
    <div class="label">
      <p>
        <span>各模块脱敏信息设置</span>
        <img src="../../assets/更多灰@2x.png" alt="">
      </p>
    </div>
    <van-dialog v-model="pwdShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="请输入登录密码"
                @confirm="pwdConfirm()"
                show-cancel-button>
      <input type="password"
             id="pwd"
             class="pwdInp"
             placeholder="输入登录密码"
             autofocus v-model="password">
    </van-dialog>
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'PrivacySettings',
  data () {
    return {
      pwdShow: false,
      password: ''
    }
  },
  methods: {
    // 点击跳转
    clickPwd () {
      this.pwdShow = true
    },
    // 密码输完确认
    pwdConfirm () {
      this.checkPwd()
    },
    // 密码检验
    checkPwd () {
      this.$http.checkPass({password: this.password})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$router.push({path: '/passwordList'})
          } else {
            Toast(res.data.msg)
            this.pwdShow = true
            this.password = ''
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FAF9FE;
  }
  header{
     width: 100%;
     height: 44px;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #E5E5E5;
     background: white;
     position: sticky;
     top: 0;
     z-index: 9;
   }
   .div{
     width: 33%;
     height: 100%;
     display: flex;
     align-items: center;
     font-family: "PingFang SC";
     font-size: 15px;
     font-weight: bold;
   }
   .div img{
     margin-right: 5px;
   }
   .div:nth-child(1) img{
     height: 13px;
     width: 7px;
     margin-left: 15px;
   }
   .div:nth-child(3) img{
     margin-right: 5px;
   }
   .div:nth-child(3) span{
     margin-right: 15px;
   }
   .div:nth-child(2){
     justify-content: center;
   }
   .div:nth-child(3){
     justify-content: flex-end;
   }
   .solid{
     color: #1DA4F2;
   }
  .label{
    width: 100%;
    height: 44px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    background: white;
  }
  .label p {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E5E5E5;
  }
  .label img{
    width: 7px;
    height: 13px;
  }
  .pwdInp{
    width: 80%;
    height: 40px;
    margin: 20px 10%;
    /*margin: 10px 15%;*/
    padding: 0 10px;
    border-radius: 5px;
    border: 1px solid #1DA4F2;
    box-sizing: border-box;
  }
  .pwdInp:focus{
    border-color: #1DA4F2;
  }
</style>
